<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';
import OrderHelper from '@firewall/utils/OrderHelper';

enum SliderType {
  IpCount = 'ipCount',
  FlowCapacity = 'flowCapacity',
}
const { t } = useI18n({ inheritLocale: true, useScope: 'local' });
interface Props {
  ipCount?: number,
  flowCapacity?: number,
  isUpdating?: boolean,
  initValues?: {
    ipCount: number,
    flowCapacity: number,
  },
}
const props = withDefaults(defineProps<Props>(), {
  ipCount: () => OrderHelper.MIN_IP_COUNT,
  flowCapacity: () => OrderHelper.MIN_FLOW_CAPACITY,
  isUpdating: false,
  initValues: () => ({
    ipCount: OrderHelper.MIN_IP_COUNT,
    flowCapacity: OrderHelper.MIN_FLOW_CAPACITY,
  }),
});
const emit = defineEmits(['update:ipCount', 'update:flowCapacity', 'submit']);
const protectionIpMarks = Enums.ProtectionIpCountSteps.reduce((marks, value) => {
  marks[value] = value + t('quantifierOfIp');
  return marks;
}, {} as Record<number, string>);
const flowProcessingCapacityMarks = Enums.FlowCapacitySteps.reduce((marks, value) => {
  marks[value] = value + t('mbps');
  return marks;
}, {} as Record<number, string>);

const needToAsyncUpdate = ref(false);
const onChange = (type: SliderType, value: number) => {
  if (!props.isUpdating) {
    emit(`update:${type}`, value);
    needToAsyncUpdate.value = false;
    return;
  }
  const currentIpCount = type === SliderType.IpCount ? value : props.ipCount;
  const currentFlowCapacity = type === SliderType.FlowCapacity ? value : props.flowCapacity;

  const isIpCountUpdating = currentIpCount !== props.initValues.ipCount;
  const isFlowCapacityUpdating = currentFlowCapacity !== props.initValues.flowCapacity;

  const isIpCountUpgrading = currentIpCount > props.initValues.ipCount;
  const isIpCountDegrading = currentIpCount < props.initValues.ipCount;

  const isFlowCapacityUpgrading = currentFlowCapacity > props.initValues.flowCapacity;
  const isFlowCapacityDegrading = currentFlowCapacity < props.initValues.flowCapacity;

  if (!isIpCountUpdating || !isFlowCapacityUpdating) {
    emit(`update:${type}`, value);
    needToAsyncUpdate.value = false;
    return;
  }

  const areSameUpdateTrends = (isIpCountUpgrading && isFlowCapacityUpgrading)
    || (isIpCountDegrading && isFlowCapacityDegrading);
  if (areSameUpdateTrends) {
    emit(`update:${type}`, value);
    needToAsyncUpdate.value = false;
    return;
  }

  emit(`update:${type}`, props.initValues[type]);
  needToAsyncUpdate.value = true;
};
const onSubmit = () => {
  emit('submit');
};

const isUpgrading = computed(() => {
  return props.ipCount > props.initValues.ipCount || props.flowCapacity > props.initValues.flowCapacity;
});
const isDegrading = computed(() => {
  return props.ipCount < props.initValues.ipCount || props.flowCapacity < props.initValues.flowCapacity;
});
</script>
<template>
  <ElFormItem :label="t('defenseIpCount')"  >
    <div class="slider-box">
      <ElSlider
        :model-value="props.ipCount"
        :marks="protectionIpMarks"
        :min="OrderHelper.MIN_IP_COUNT"
        :max="OrderHelper.MAX_IP_COUNT"
        @input="(value: number) => { onChange(SliderType.IpCount, value) }"
        @change="onSubmit"
      />
      <ElInputNumber
        :model-value="props.ipCount"
        :min="isUpgrading ? props.initValues.ipCount : OrderHelper.MIN_IP_COUNT"
        :max="isDegrading ? props.initValues.ipCount : OrderHelper.MAX_IP_COUNT"
        @change="(value: number) => {
          onChange(SliderType.IpCount, value);
          onSubmit();
        }"
      />
      <div>{{t('quantifierOfIp')}}</div>
      <div v-if="!props.isUpdating" class="slider-message">
        {{t('ipCountAdviceTip')}}
      </div>
    </div>
  </ElFormItem>
  <ElFormItem :label="t('internetFlowProcessingCapacity')" >
    <div class="slider-box">
      <ElSlider
        :model-value="props.flowCapacity"
        :step="OrderHelper.FLOW_CAPACITY_STEP"
        :marks="flowProcessingCapacityMarks"
        :min="OrderHelper.MIN_FLOW_CAPACITY"
        :max="OrderHelper.MAX_FLOW_CAPACITY"
        @input="(value: number) => { onChange(SliderType.FlowCapacity, value) }"
        @change="onSubmit"
      />
      <ElInputNumber
        :model-value="props.flowCapacity"
        :step="OrderHelper.FLOW_CAPACITY_STEP"
        :min="isUpgrading ? props.initValues.flowCapacity : OrderHelper.MIN_FLOW_CAPACITY"
        :max="isDegrading ? props.initValues.flowCapacity : OrderHelper.MAX_FLOW_CAPACITY"
        @change="(value: number) => {
          onChange(SliderType.FlowCapacity, value);
          onSubmit();
        }"
      />
      <div> {{t('mbps')}} </div>
      <div v-if="!props.isUpdating" class="slider-message">
        {{t('flowCapacityAdviceTip')}}
      </div>
    </div>
  </ElFormItem>
  <div class="sync-operation-tip">
    {{needToAsyncUpdate ? t('syncOperationTip') : ''}}
  </div>
</template>
<i18n lang="yaml" locale="zh-CN">
  quantifierOfIp: '个'
  mbps: 'Mbps'
  defenseIpCount: '可防护公网IP数'
  internetFlowProcessingCapacity: '公网流量处理能力'
  ipCountAdviceTip: '该选项建议不少于选中VPC中防护的公网IP数量'
  flowCapacityAdviceTip: '该选项建议不少于选中VPC中防护的公网IP带宽之和'
  syncOperationTip: '升降配不能同时进行，请分步提交升配和降配订单'
</i18n>

<style lang="scss" scoped>
.notification-text {
  color: #f66;
}

.slider-box {
  display: flex;
  width: 100%;
  margin-bottom: 20px;

  .el-slider {
    width: 800px;
    margin-right: 5px;
  }

  .el-input-number {
    min-width: 100px;
    margin: 0 10px 0 5px;
  }

  .slider-message {
    margin-left: 10px;
    font-size: 12px;
    color: var(--el-color-info);
    white-space: nowrap;
  }

  :deep(.el-slider__marks-text) {
    font-size: 12px;
    white-space: nowrap;
  }
}

.sync-operation-tip {
  height: 12px;
  margin: 5px 0;
  font-size: 12px;
  color: #f66;
}
</style>
